<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <!-- Bootstrap v3.3.4 核心 CSS 文件 -->
    <link rel="stylesheet" href="../css/bootstrap.min.css">
    <script src="../js/jquery.min.js"></script>
    <!-- Bootstrap v3.3.4 核心 JavaScript 文件 -->
    <script src="../js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="../css/sqh_style_v2.0.css">
    <script src="../js/sqh_js_v2.0.js"></script>
    <title>抽奖</title>
    <style>

        .record{
            position: relative;
            width: 100%;
            padding: 6px 0;
        }
        .popover {
            position: relative;
        }
        .chatlist, .chatlist2 {
            display: block;
            margin-bottom: 40px;
            padding-top: 5px;
        }
        .chatlist li, .chatlist2 li {
            width: 100%;
            margin-bottom: 8px;
            float: right;
        }
        .chatlist li span, .chatlist2 li span {
            position: relative;
            background: #fff;
            padding: 8px 10px;
            margin-right: 15px;
            border-radius: 5px;
            display: block;
            float: right;
        }

        .chatlist li span:before {
            display: block;
            content: '';
            width: 0;
            height: 0;
            border-top: 6px solid transparent;
            border-left: 6px solid #fff;
            border-bottom: 6px solid transparent;
            position: absolute;
            right: -6px;
            top: 12px;
        }
        .chatlist li span, .chatlist2 li span {
            position: relative;
            background: #fff;
            padding: 8px 10px;
            margin-right: 15px;
            border-radius: 5px;
            display: block;
            float: right;
        }

        .cf {
            clear: both;
        }

        .sendbtn {
            display: block;
            background: url(../img/send.png?v=1) no-repeat;
            width: 50px;
            height: 28px;
            background-size: 100% 100%;
            margin: 0 10px 10px 0;
            bottom: 0;
            right: 0;
            position: absolute;
        }
        .chatbox {
            height: 300px;
            width: 100%;
            overflow-y: auto;
            -webkit-overflow-scrolling: touch;
        }
        .part01-ctrl {
            height: 50px;
            background: #f5f5f7;
            position: relative;
        }

        .ctrl_01 {
            display: block;
            background: url(../img/ctrl_01.png) no-repeat;
            width: 28px;
            height: 28px;
            left: 10px;
            top: 12px;
            background-size: 100% 100%;
        }
        .part01-ctrl .text {
            width: 175px;
            height: 32px;
            line-height: 32px;
            color: #000;
            border: 1px solid #acacae;
            background: #fff;
            border-radius: 5px;
            padding-left: 5px;
            margin: 7px 0 0 45px;
            float: left;
            overflow: hidden;
        }
        .ctrl_02 {
            display: block;
            background: url(../img/ctrl_02.png) no-repeat;
            width: 28px;
            height: 28px;
            right: 50px;
            top: 12px;
            background-size: 100% 100%;
        }
        .ctrl_03 {
            display: block;
            background: url(../img/ctrl_03.png) no-repeat;
            width: 28px;
            height: 28px;
            right: 10px;
            top: 12px;
            background-size: 100% 100%;
        }
        .pa {
            position: absolute;
        }
        .ctrlbox {
            background: #d7d8dc none repeat scroll 0 0;
            bottom: 0;
            left: 0;
            width: 100%;
            z-index: 22;
        }
    </style>

    <script>

        //标记开始答题,false表示还没有开始答题，true表示已经开始答题
        var startFlag = false;
        //用来标记回答了几个问题
        var count=0;
        //统计答对的正确数
        var correct=0;

        //滚动条到底部
        function scrollToBottom(){
            chatContainer.scrollTop = chatContainer.scrollHeight;
        }
    </script>


</head>
<body style="background: #cd011c">

<div class="max_width_720px margin_center " id="content">

<div id="page4" style="background: #cb011b;" class=" overflow_hidden">

    <img src="../img/lottery_1.jpg" class="img-responsive relative" style="">

    <div class="container-fluid">
        <div class="float_left width_40">
            <div class="margin_center width_90">
                <img src="../img/lottery_2.png" class="img-responsive relative margin_auto" style="" id="guajiangqu_img">
            </div>
        </div>

        <div class="float_left width_60" >
            <div class="margin_center width_90 relative">
                <img src="../img/no_thanks.jpg" class="img-responsive relative" style="" id="iszhongjiang">
                <canvas class="absolute" id="canvasID" style="top:0;left: 0;">sdafdsaf</canvas>
            </div>
        </div>

        <script>

            //刮奖的次数
            var startCount=0;
            //是否中奖,true表示已经中奖，false表示没有中奖
            var isOK=true;

            function canvasInit(){
                var img = new Image();
                var canvas = document.querySelector('canvas');

                //设置画布的背景颜色为透明，然后
                canvas.style.backgroundColor='transparent';
//                    var imgs = ['../img/p_0.jpg','../img/p_1.jpg'];
                var imgs = ['../img/no_thanks.jpg','../img/no_thanks.jpg'];
                var num = Math.floor(Math.random()*2);
                img.src = imgs[num];

                img.addEventListener('load', function(e) {
                    var ctx;
//                        var w = img.width,
//                            h = img.height;
                    var w = parseFloat($("#iszhongjiang").css("width").split("px")[0]);
                    var h = parseFloat($("#iszhongjiang").css("height").split("px")[0]);

                    var offsetX = $("canvas").parent().get(0).offsetLeft,
                            offsetY = $("canvas").parent().get(0).offsetTop;

                    var mousedown = false;

                    //给画布添加gray背景
                    function layer(ctx) {
                        ctx.fillStyle = 'gray';
                        ctx.fillRect(0, 0, w, h);
                    }

                    function eventDown(e){
                        e.preventDefault();
                        mousedown=true;
                        startCount++;
                    }

                    function eventUp(e){
                        e.preventDefault();
                        mousedown=false;
                        //弹出用户输入表单
                        if(startCount>3 && isOK){
                            showTips();
                        }
                    }

                    function eventMove(e){
                        e.preventDefault();

                        if(mousedown) {
                            if(e.changedTouches){
                                e=e.changedTouches[e.changedTouches.length-1];
                            }
                            var x = e.offsetX;
                            var y = e.offsetY;
                            if(x == undefined){
                                x = e.pageX - offsetX;
                                y = e.pageY - offsetY;
                            }

                            with(ctx) {
                                beginPath();
                                arc(x, y, 10, 0, Math.PI * 2);
                                fill();
                            }
                        }
                    }

                    //将图片的高度和宽度与canvas保持一致
                    canvas.width=w;
                    canvas.height=h;

                    //是否中奖的图片作为画布的背景色
//                        canvas.style.backgroundImage='url('+img.src+')';

                    //在画布中画一个矩形，高度和宽度与图片一致
                    ctx=canvas.getContext('2d');
                    ctx.fillStyle='transparent';
                    ctx.fillRect(0, 0, w, h);

                    layer(ctx);

                    ctx.globalCompositeOperation = 'destination-out';

                    //给画布添加touch 和 mouse 事件
                    canvas.addEventListener('touchstart', eventDown);
                    canvas.addEventListener('touchend', eventUp);
                    canvas.addEventListener('touchmove', eventMove);
                    canvas.addEventListener('mousedown', eventDown);
                    canvas.addEventListener('mouseup', eventUp);
                    canvas.addEventListener('mousemove', eventMove);
                });
            }

            canvasInit();

        </script>

    </div>
</div>

</div>

<div class="D_downOperating display_none"  id="shareContainer" >
    <div class="container-fluid margin_center width_80">
        <img src="../img/share.jpg" class="img-responsive">
    </div>
    <div class="modal-backdrop fade in"></div>
</div>

<!-- 弹出模态对话框，提交表单 -->
<div class="modal fade" id="sqh_model">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">用户信息</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal">

                    <div class="form-group">
                        <label class="col-sm-2 control-label">姓名</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" name="username" id="username" placeholder="请输入姓名">
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="col-sm-2 control-label">电话</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" name="phoneNumber" id="phoneNumber" placeholder="请输入电话" maxlength="11">
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="col-sm-2 control-label">地址</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" name="address" id="address" placeholder="请输入详细地址">
                        </div>
                    </div>

                    <input type="submit" class="sr-only" id="commitInfo" value="提交">

                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" onclick="commitInfo()">确定</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->


</body>

<script>
    //提交表单
    function commitInfo(){
        var username = document.getElementById("username").value;
        var phoneNumber = document.getElementById("phoneNumber").value;
        var address = document.getElementById("address").value;
        if(username.length <= 0){
            alert("请输入姓名");
            document.getElementById("username").focus();
            return false;
        }

        if(phoneNumber.length <= 0){
            alert("请输入号码");
            document.getElementById("phoneNumber").focus();
            return false;
        }

        if(address.length <= 0){
            alert("请输入地址");
            document.getElementById("address").focus();
            return false;
        }

        if(phoneNumber.length>0 && username.length>5 && address.length>0 ){
            $("#commitInfo").click();
        }

    }

    //弹出输入框
    function showTips(){
        //{"backdrop":"static"}点击背景不会消失
        $('#sqh_model').modal({"backdrop":"static"}).modal('show').on("shown.bs.modal",function(){
            // 是弹出框居中。。。，this代表当前控件（原生HTML代码）
            var $modal_dialog = $(this).find('.modal-dialog');
            //获取可视窗口的高度
            var clientHeight = (document.body.clientHeight < document.documentElement.clientHeight) ? document.body.clientHeight: document.documentElement.clientHeight;
            //得到dialog的高度
            var dialogHeight = $modal_dialog.height();
            //计算出距离顶部的高度
            var m_top = (clientHeight - dialogHeight)/2;
            console.log("clientHeight : " + clientHeight);
            console.log("dialogHeight : " + dialogHeight);
            console.log("m_top : " + m_top);
            $modal_dialog.css({'margin': m_top + 'px auto'});
        });
    }

    //guajiangqu_img图片加载完之后执行的方法
    guajiangqu_img.onload = function(){
        $(this).css({
            "padding-top":this.height * 0.75 + "px",
            "padding-bottom":this.height * 0.75 + "px"
        });
    }

    // iszhongjiang 图片加载完之后执行的方法
    iszhongjiang.onload = function(){
        $(this).css({
            "padding-top":this.height * 0.75 + "px",
            "padding-bottom":this.height * 0.75 + "px"
        });

        $("#canvasID").css({
            "padding-top":this.height * 0.75 + "px",
            "padding-bottom":this.height * 0.75 + "px"
        });
    }

    function nextStep(currentPage,nextPage){
        $("#"+currentPage).addClass("display_none");
        $("#"+nextPage).removeClass("display_none");
    }

    $(function(){
        window.onload = function(){
            inputNumberOnly("#phoneNumber");

            var screenHeight = getScreenHeight();
            document.getElementById("content").style.height = screenHeight+"px";

            $('[data-toggle="tooltip"]').tooltip();
            $('[data-toggle="popover"]').popover({
                //提示标签在控件显示的位置 —— top | bottom | left | right | auto
                placement : "left",
                //在template模板<div class="tooltip-inner"></div>控件内展示的内容
                //触发事件click | hover | focus | manual.
                trigger:"click",
                //是否将html代码做转换，false是不转换，true表示转换
                html:true
            });
        };
    });



</script>

</html>

